<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>详情</title>
    <link rel="stylesheet" type="text/css" href="css/common.css" th:href="@{/arc/css/common.css?v=3.6.0}"/>
</head>
<style type="text/css">
    .content {
        height: 30rem;
        color: white;
        display: flex;
        margin: 0 1rem;
        justify-content: space-evenly;
        align-items: center;
    }

    .content nav {
        width: 1rem;
        color: rgb(21, 136, 194);
    }

    .content > div {
        width: 20%;
        border-radius: 0.3rem;
        text-align: center;
        border: 1px solid rgb(21, 136, 194);
        padding-bottom: 0.5rem;
    }

    .navPtwo {
        height: 15rem;
        display: flex;
        flex-wrap: wrap;
        align-content: space-between;
    }

    .divTwo,
    .divFour {
        border: none !important;
        padding: initial !important;
    }

    .divTwo > div {
        border-radius: 0.3rem;
        border: 1px solid rgb(21, 136, 194);
        padding-bottom: 0.5rem;
    }

    .divTwo > div:first-child {
        margin-bottom: 1rem;
    }

    .divFour > div > div {
        border-radius: 0.3rem;
        border: 1px solid rgb(21, 136, 194);
        padding-bottom: 0.5rem;
    }

    .divFour > div:first-child {
        margin-bottom: 0.5rem;
    }

    .pTitle {
        color: rgb(21, 136, 194);
        margin-top: 0.5rem;
    }

    .pTitle,
    .pContent {
        text-align: left;
        padding-left: 0.6rem;
    }

    .content p span {
        display: inline-block;
        padding: 0.1rem;
        border-radius: 0.1rem;
    }

    .cont1 {
        color: rgb(40, 221, 229);
        vertical-align: middle;
        padding: 2rem 0px !important;
        width: 3rem !important;
    }

    .cont1 p {
        writing-mode: vertical-lr;
        writing-mode: tb-lr;
        margin: auto;
        letter-spacing: 0.3rem;
        margin-top: 0.5rem;
    }

    .cont2 {
        /* height: 18rem; */
    }

    .cont2 img {
        width: 3rem;
        height: 3rem;
    }

    .content div:not(.cont1) * {
        font-size: 0.6rem;
    }

    .colorYellow {
        background: #fff100;
    }

    .colorOrgine {
        background-color: #efbb28;
    }

    .colorGreen {
        background-color: #107c10;
    }


</style>
<body>
<header>
    <h1>西城区建设项目情况树状图</h1>
    <h2>THE XICHENG DISTRICT CONSTRUCTION PROJECT</h2>
</header>
<div class="content">
    <div class="cont1">
        <span id="serverDate" th:text="${serverDate}" style="visibility: hidden"/>
        <span id="projectId" th:text="${project.id}" style="visibility: hidden"/>
        <span id="projectNo" th:text="${project.projectNo}"></span>
        <p id="projectName" th:text="${project.projectName}"></p>
    </div>
    <nav>→</nav>
    <div class="cont2">
        <img src="/arc/images/headerBg.png" alt="">
        <span id="builderId" th:text="${builderCompany.id}" style="visibility: hidden"/>
        <p class="pTitle" style="text-align: center;">建设单位：</p>
        <p class="pContent" th:text="${builderCompany.companyName}"></p>
        <p class="pTitle">项目负责人：</p>
        <p class="pContent" th:text="${builderCompany.managerName}"></p>
        <p class="pTitle">电话：</p>
        <p class="pContent" th:text="${builderCompany.managerPhone}"></p>
        <p class="pTitle">农民工支付保函金额：</p>
        <p class="pContent" th:text="${builderCompany.guaranteeAmount}"></p><span>万元</span>
        <p class="pTitle">可用余额：</p>
        <p class="pContent" th:text="${builderCompany.guaranteeAmountFree}"></p><span>万元</span>
        <p class="pTitle">保函有效期：</p>
        <p class="pContent">
            <span class="colorRed" id="builderGuaranteePeriod" th:text="${#dates.format(builderCompany.guaranteePeriod, 'yyyy-MM-dd')}"> </span>
        </p>
    </div>
    <nav>→</nav>
    <div>
        <p class="pTitle">施工合同余额：</p>
        <p class="pContent" id="builderContractAmount"></p>
        <p class="pTitle">支付方式：</p>
        <p class="pContent" id="builderPayMethod"></p>
        <p class="pTitle">拖欠工程款余额</p>
        <p class="pContent" id="builderPaymentArrears"></p>
        <p class="pTitle">计划支付日期：</p>
        <p class="pContent" id="builderPlanPayDate"></p>
    </div>
    <nav>→</nav>
    <div>
        <p class="pTitle">施工单位：</p>
        <p class="pContent" id="labourCompanyName"></p>
        <p class="pTitle">负责人：</p>
        <p class="pContent" id="labourManagerName"></p>
        <p class="pTitle">电话：</p>
        <p class="pContent" id="labourManagerPhone"></p>
        <p class="pTitle">农民工支付保函金额：</p>
        <p class="pContent" id="labourPaidGuaranteeAmount"></p>
        <p class="pTitle">余额：</p>
        <p class="pContent" id="labourGuaranteeAmountFree"></p>
        <p class="pTitle">保函有效期：</p>
        <p class="pContent">
            <span class="colorRed" id="labourGuaranteePeriod"></span>
        </p>
    </div>
    <nav class="navPtwo">
        <p>→</p>
        <p>→</p>
    </nav>
    <div class="divTwo">
        <div>
            <p class="pTitle">劳动合同金额：</p>
            <p class="pContent" id="labourContractAmount0"></p>
            <p class="pTitle">支付方式：</p>
            <p class="pContent" id="labourPayMethod0"></p>
            <p class="pTitle">拖欠工程款余额：</p>
            <p class="pContent" id="labourPaymentArrears0"></p>
            <p class="pTitle">计划支付日期：</p>
            <p class="pContent">
                <span class="colorGreen" id="labourPlanPayDate0"></span>
            </p>
        </div>
        <div>
            <p class="pTitle">劳动合同金额：</p>
            <p class="pContent" id="labourContractAmount1"></p>
            <p class="pTitle">支付方式：</p>
            <p class="pContent" id="labourPayMethod1"></p>
            <p class="pTitle">拖欠工程款余额：</p>
            <p class="pContent" id="labourPaymentArrears1"></p>
            <p class="pTitle">计划支付日期：</p>
            <p class="pContent">
                <span class="colorGreen" id="labourPlanPayDate1"></span>
            </p>
        </div>
    </div>
    <nav class="navPtwo">
        <p>→</p>
        <p>→</p>
    </nav>
    <div class="divTwo">
        <div>
            <p class="pTitle">劳务分包单位：</p>
            <p class="pContent" id="labourSubCompanyName0"></p>
            <p class="pTitle">工人组成：</p>
            <p class="pContent" id="labourSubWorkerCombin0"></p>
            <p class="pTitle">负责人：</p>
            <p class="pContent" id="labourSubManagerName0"></p>
            <p class="pTitle">电话：</p>
            <p class="pContent" id="labourSubManagerPhone0"></p>
            <p class="pTitle">籍贯：</p>
            <p class="pContent" id="labourSubNativePlace0"></p>
        </div>
        <div>
            <p class="pTitle">劳务分包单位：</p>
            <p class="pContent" id="labourSubCompanyName1"></p>
            <p class="pTitle">工人组成：</p>
            <p class="pContent" id="labourSubWorkerCombin1"></p>
            <p class="pTitle">负责人：</p>
            <p class="pContent" id="labourSubManagerName1"></p>
            <p class="pTitle">电话：</p>
            <p class="pContent" id="labourSubManagerPhone1"></p>
            <p class="pTitle">籍贯：</p>
            <p class="pContent" id="labourSubNativePlace1"></p>
        </div>
    </div>
    <nav class="navPtwo">
        <p>→</p>
        <p>→</p>
    </nav>
    <div class="divFour">
        <div>
            <div>
                <p class="pTitle">拖欠农民工工资金额：</p>
                <p class="pContent" id="labourSubWagesArrearsAmount0"></p>
                <p class="pTitle">拖欠工种人数：</p>
                <p class="pContent" id="labourSubWorkerNumberArrears0"></p>
                <p class="pTitle">工人主要来源地：</p>
                <p class="pContent" id="labourSubWorkerSource0"></p>
                <p class="pTitle">农民工代表：</p>
                <p class="pContent" id="labourSubRepresentWorker0"></p>
                <p class="pTitle">联系方式：</p>
                <p class="pContent" id="labourSubRepresentPhone0"></p>
            </div>
            <div>
                <p class="pTitle">农民工投诉情况：</p>
                <p class="pContent" id="workerComplain0"></p>
            </div>
        </div>
        <div>
            <div>
                <p class="pTitle">拖欠农民工工资金额：</p>
                <p class="pContent" id="labourSubWagesArrearsAmount1"></p>
                <p class="pTitle">拖欠工种人数：</p>
                <p class="pContent" id="labourSubWorkerNumberArrears1"></p>
                <p class="pTitle">工人主要来源地：</p>
                <p class="pContent" id="labourSubWorkerSource1"></p>
                <p class="pTitle">农民工代表：</p>
                <p class="pContent" id="labourSubRepresentWorker1"></p>
                <p class="pTitle">联系方式：</p>
                <p class="pContent" id="labourSubRepresentPhone1"></p>
            </div>
            <div>
                <p class="pTitle">农民工投诉情况：</p>
                <p class="pContent" id="workerComplain1"></p>
            </div>
        </div>
    </div>
</div>
</body>
<th:block th:include="include :: footer"/>
<script th:inline="javascript">
    web_status = {
        SUCCESS: 0,
        FAIL: 500,
        WARNING: 301
    };
    $(function () {
        //建设合同
        loadBuilderContract();
    });
    var labourCompanyId;

    function loadBuilderContract() {
        let pid = $("#projectId").text();
        let bid = $("#builderId").text();

        let url = "/architecture/home/queryBuilderContract?projectId=" + pid + "&builderCompanyId=" + bid;
        $.operate.get(url, function (resp) {
            if (resp.code == web_status.SUCCESS) {
                let item = resp.data;
                console.info(item);
                let builderContract = item.builderContract;
                if (!!builderContract) {
                    labourCompanyId = item.labourId;
                    $("#builderPlanPayDate").text(builderContract.planPayDate);
                    $("#builderPaymentArrears").text(builderContract.paymentArrears + " 万元");
                    $("#builderPayMethod").text(builderContract.payMethod);
                    $("#builderContractAmount").text(builderContract.contractAmount + " 万元");
                }
                let labourCompany = item.labourCompany;
                if (!!labourCompany) {
                    $("#labourGuaranteePeriod").text(labourCompany.guaranteePeriod);
                    $("#labourGuaranteeAmountFree").text(labourCompany.guaranteeAmountFree + "万元");
                    $("#labourPaidGuaranteeAmount").text(labourCompany.paidGuaranteeAmount + "万元");
                    $("#labourManagerPhone").text(labourCompany.managerPhone);
                    $("#labourManagerName").text(labourCompany.managerName);
                    $("#labourCompanyName").text(labourCompany.companyName);
                }
                let labourContractComplexList = item.labourContractComplexList;
                if (!!labourContractComplexList) {
                    if (labourContractComplexList.length > 1) {
                        let top = labourContractComplexList[0];
                        if (!!top) {
                            let labourContract = top.labourContract;
                            if (!!labourContract) {
                                $("#labourPlanPayDate0").text(labourContract.planPayDate);
                                $("#labourPaymentArrears0").text(labourContract.paymentArrears + "万元");
                                $("#labourPayMethod0").text(labourContract.payMethod);
                                $("#labourContractAmount0").text(labourContract.contractAmount + "万元");
                            }
                            let labourSubCompany = top.labourSubCompany;
                            if (!!labourSubCompany) {
                                $("#labourSubCompanyName0").text(labourSubCompany.companyName);
                                $("#labourSubWorkerCombin0").text(labourSubCompany.workerCombin);
                                $("#labourSubManagerName0").text(labourSubCompany.managerName);
                                $("#labourSubManagerPhone0").text(labourSubCompany.managerPhone);
                                $("#labourSubNativePlace0").text(labourSubCompany.nativePlace);
                            }
                            let labourSubCompanyDetails = top.labourSubCompanyDetails;
                            if (!!labourSubCompanyDetails) {
                                $("#labourSubWagesArrearsAmount0").text(labourSubCompanyDetails.wagesArrearsAmount);
                                $("#labourSubWorkerNumberArrears0").text(labourSubCompanyDetails.workerNumberArrears);
                                $("#labourSubWorkerSource0").text(labourSubCompanyDetails.workerSource);
                                $("#labourSubRepresentWorker0").text(labourSubCompanyDetails.representWorker);
                                $("#labourSubRepresentPhone0").text(labourSubCompanyDetails.representPhone);
                            }
                            let workerComplains = top.workerComplains;
                            if (!!workerComplains) {
                                let ren = "";
                                let bm = "";
                                let nr = "";
                                for (let i = 0; i < workerComplains.length; i++) {
                                    let ts = workerComplains[0];
                                    ren = ren + ts.complainLeader + "、";
                                    bm = bm + ts.complainDepartment + "、";
                                    nr = nr + ts.complainContent + "、";
                                }
                                if (ren == "") {
                                    $("#workerComplain0").text("");
                                } else {
                                    $("#workerComplain0").text(ren + "在" + bm + " 投诉 " + nr);
                                }
                            }

                        }
                    }
                    if (labourContractComplexList.length > 2) {
                        let btm = labourContractComplexList[1];
                        if (!!btm) {
                            let labourContract = btm.labourContract;
                            if (!!labourContract) {
                                $("#labourPlanPayDate1").text(labourContract.planPayDate);
                                $("#labourPaymentArrears1").text(labourContract.paymentArrears + "万元");
                                $("#labourPayMethod1").text(labourContract.payMethod);
                                $("#labourContractAmount1").text(labourContract.contractAmount + "万元");
                            }
                            let labourSubCompany = top.labourSubCompany;
                            if (!!labourSubCompany) {
                                $("#labourSubCompanyName1").text(labourSubCompany.companyName);
                                $("#labourSubWorkerCombin1").text(labourSubCompany.workerCombin);
                                $("#labourSubManagerName1").text(labourSubCompany.managerName);
                                $("#labourSubManagerPhone1").text(labourSubCompany.managerPhone);
                                $("#labourSubNativePlace1").text(labourSubCompany.nativePlace);
                            }
                            let labourSubCompanyDetails = top.labourSubCompanyDetails;
                            if (!!labourSubCompanyDetails) {
                                $("#labourSubWagesArrearsAmount1").text(labourSubCompanyDetails.wagesArrearsAmount);
                                $("#labourSubWorkerNumberArrears1").text(labourSubCompanyDetails.workerNumberArrears);
                                $("#labourSubWorkerSource1").text(labourSubCompanyDetails.workerSource);
                                $("#labourSubRepresentWorker1").text(labourSubCompanyDetails.representWorker);
                                $("#labourSubRepresentPhone1").text(labourSubCompanyDetails.representPhone);
                            }
                            let workerComplains = top.workerComplains;
                            if (!!workerComplains) {
                                let ren = "";
                                let bm = "";
                                let nr = "";
                                for (let i = 0; i < workerComplains.length; i++) {
                                    let ts = workerComplains[0];
                                    ren = ren + ts.complainLeader + "、";
                                    bm = bm + ts.complainDepartment + "、";
                                    nr = nr + ts.complainContent + "、";
                                }
                                if (ren == "") {
                                    $("#workerComplain1").text("");
                                } else {
                                    $("#workerComplain1").text(ren + "在" + bm + " 投诉 " + nr);
                                }
                            }

                        }
                    }
                }
                setGuaranteePeriodColor();
            } else {
                console.error("加载建设合同异常" + resp);
            }
        });
    }

    function setGuaranteePeriodColor() {
        //1 建设有效期 builderGuaranteePeriod
        //2 劳务有效期 labourGuaranteePeriod

        let nowDate = $("#serverDate").text();
        let js = $("#builderGuaranteePeriod").text();

        if (!!js) {
            let diff1 = getDiffDay(js, nowDate);
            if (diff1 < 0) {
                $("#builderGuaranteePeriod").attr("class", "colorRed");
            } else if (diff1 < 15) {
                $("#builderGuaranteePeriod").attr("class", "colorYellow");
            } else if (diff1 < 30) {
                $("#builderGuaranteePeriod").attr("class", "colorOrgine");
            } else {
                $("#builderGuaranteePeriod").attr("class", "colorGreen");
            }
        }
        let lw = $("#labourGuaranteePeriod").text();
        if (!!lw) {
            let diff2 = getDiffDay(lw, nowDate);
            if (diff2 < 0) {
                $("#labourGuaranteePeriod").attr("class", "colorRed");
            } else if (diff2 < 15) {
                $("#labourGuaranteePeriod").attr("class", "colorYellow");
            } else if (diff2 < 30) {
                $("#labourGuaranteePeriod").attr("class", "colorOrgine");
            } else {
                $("#labourGuaranteePeriod").attr("class", "colorGreen");
            }
        }
    }

    function getDiffDay(date_1, date_2) {
        // 计算两个日期之间的差值
        let totalDays, diffDate
        let myDate_1 = Date.parse(date_1)
        let myDate_2 = Date.parse(date_2)
        // 将两个日期都转换为毫秒格式，然后做差
        //diffDate = Math.abs(myDate_1 - myDate_2) // 取相差毫秒数的绝对值
        diffDate = (myDate_1 - myDate_2) // 取相差毫秒数的绝对值

        totalDays = Math.floor(diffDate / (1000 * 3600 * 24)) // 向下取整
        // console.log(totalDays)

        return totalDays    // 相差的天数
    }


</script>
</html>
